import React from 'react'

//导入ant design
import { Layout, Menu, Icon } from 'antd'
const { Header, Footer, Content, Sider } = Layout

//导入 样式
import appstyle from '@/css/app.scss'
// import 'antd/dist/antd.css'

//导入 路由
import {  HashRouter, Route, Link } from "react-router-dom"

//导入组件
import About from '@/components/About'
import Home from '@/components/Home'
import Movie from '@/components/Movie'




export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }


    
    render() {
        return <HashRouter >
            <Layout className="layout" style={{ height: '100%' }}>

                <Header>
                    <div className={appstyle.logo} />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="home">
                            <Link to="/home">Home</Link>
                        </Menu.Item>
                        <Menu.Item key="movie">
                            <Link to='/movie/in_theaters/1'>Movie</Link>
                        </Menu.Item>
                        <Menu.Item key="about">
                            <Link to='/about'>About</Link>
                        </Menu.Item>
                    </Menu>
                </Header>
                
                <Content style={{ backgroundColor: '#fff', padding: '0 50px', heigth: '100%',flex:1 }}>
                   
                    <Route path="/home"  component={Home}></Route>
                    <Route path="/movie"  component={Movie}></Route>
                    <Route path="/about"  component={About}></Route>
                </Content>

                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>

            </Layout>


        </HashRouter>
    }

    componentDidMount() { 
    }

}

